<template>
  <el-dialog
    :before-close="handleClose"
    :title="title === 'Add' ? '新增' : '编辑'"
    :visible.sync="dialogVisible"
    width="650"
    @close="handleCloseDialog"
    @opened="initWangEditor"
  >
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      class="demo-ruleForm"
      label-width="100px"
    >
      <el-form-item label="问题名称" prop="question_name">
        <el-input
          v-model="ruleForm.question_name"
          placeholder="请输入问题名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="问题关键词" prop="question_name_keyword">
        <el-input
          v-model="ruleForm.question_name_keyword"
          placeholder="多个用中文逗号隔开，最多6个"
        ></el-input>
      </el-form-item>
      <el-form-item label="问题答案" prop="question_answer">
        <div style="height:370px">
          <div id="wang_editor" ref="wang_editor" class="mb-3"></div>
        </div>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="ruleForm.sort"></el-input>
      </el-form-item>
      <el-form-item label="日期类型" prop="valid_date_type">
        <el-radio v-model="ruleForm.valid_date_type" :label="1">永久</el-radio>
        <el-radio v-model="ruleForm.valid_date_type" :label="2">
          自定义时间
        </el-radio>
      </el-form-item>
      <el-form-item v-if="ruleForm.valid_date_type === 2" label=" ">
        <el-date-picker
          v-model="date_value"
          class="mr-5"
          clearable
          end-placeholder="结束日期"
          range-separator="至"
          start-placeholder="开始日期"
          type="daterange"
          value-format="yyyy-MM-dd"
          @change="handleChangeDate"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="问题状态" prop="status">
        <el-radio v-model="ruleForm.status" :label="1">启用</el-radio>
        <el-radio v-model="ruleForm.status" :label="0">禁用</el-radio>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="ruleForm.remark"
          :cols="3"
          type="textarea"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" center class="dialog-footer">
      <el-button @click="handleClose">关 闭</el-button>
      <el-button @click="handleConfirm('ruleForm')">确 认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  postAddData,
  getDetailData,
  postEditData
} from "@/api/config/onlineQuestion";

import wangEditor from "wangeditor";
import { IMG_UPLOAD_URL } from "@/data/basic_data";
import { getToken } from "@/utils/auth";

;

export default {
  name: "addEditModal",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "Add"
    },
    id: {
      type: Number
    }
  },
  data() {
    return {
      wangEdit: null,

      uploadUrl:
        process.env.BASE_API +
        "system-set/app-version/management/apk/uploadApk",
      date_value: "",
      ruleForm: {
        question_name: undefined,
        question_name_keyword: undefined,
        question_answer: undefined,
        sort: 1000,
        valid_date_type: 1,
        valid_date_start: undefined,
        valid_date_end: undefined,
        status: 1,
        remark: undefined
      },
      rules: {
        question_name: [
          { required: true, message: "请输入问题名称", trigger: "blur" }
        ],
        question_name_keyword: [
          { required: true, message: "请输入问题关键词", trigger: "blur" }
        ],
        question_answer: [
          { required: true, message: "请输入问题答案", trigger: "blur" }
        ],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
        valid_date_type: [
          { required: true, message: "请选择", trigger: "change" }
        ],
        status: [{ required: true, message: "请选择", trigger: "change" }]
      }
    };
  },

  methods: {
    initWangEditor() {
      this.wangEdit = new wangEditor(this.$refs["wang_editor"]);
      this.wangEdit.config.height = 250;
      this.wangEdit.config.uploadImgServer = IMG_UPLOAD_URL;
      this.wangEdit.config.uploadFileName = "file";
      this.wangEdit.config.uploadImgHeaders = {
        ...this.importHeaders
      };
      this.wangEdit.config.uploadImgHooks = {
        customInsert: (insertImgFn, { data }) => insertImgFn(data.url)
      };
      this.wangEdit.config.onchange = newHtml =>
        (this.ruleForm.question_answer = newHtml);
      this.wangEdit.create();

      // if (this.status === "Edit") {
      //   this.wangEdit.txt.html(this.ruleForm.question_answer);
      // }
    },

    /**自定义时间 */
    handleChangeDate(value) {
      if (value) {
        this.ruleForm.valid_date_start = value[0];
        this.ruleForm.valid_date_end = value[1];
      } else {
        this.ruleForm.valid_date_start = undefined;
        this.ruleForm.valid_date_end = undefined;
      }
    },

    /**关闭弹出框 */
    handleClose() {
      this.$emit("update:title", "Add");
      this.$emit("update:dialogVisible", false);
    },
    handleCloseDialog() {
      this.$refs["ruleForm"].resetFields();
      this.$refs["wang_editor"].innerHTML = "";
      this.wangEdit.destroy();
      this.wangEdit = null;
    },

    /**表单确认 */
    handleConfirm(formName) {
      this.$refs[formName].validate(async valid => {
        if (this.ruleForm.valid_date_type === 1) {
          this.ruleForm.valid_date_start = undefined;
          this.ruleForm.valid_date_end = undefined;
        }

        if (valid) {
          let detail;
          if (this.title === "Add") {
            detail = await postAddData(this.ruleForm);
          } else {
            detail = await postEditData(this.ruleForm);
          }

          if (detail.code === 200) {
            this.$message.success(
              this.title === "Add" ? "添加成功!" : "编辑成功"
            );
            this.$emit("update:dialogVisible", false);
            this.$emit("updateTable");
            this.$emit("update:title", "Add");
          }
        } else {
          return false;
        }
      });
    }
  },
  watch: {
    title: async function(newValue, oldValue) {
      let detail;
      if (newValue === "Edit") {
        detail = await getDetailData(this.id);
        this.ruleForm.id = detail.data.id;
        this.ruleForm.question_name = detail.data.name;
        this.ruleForm.question_name_keyword = detail.data.keywords;
        this.ruleForm.question_answer = detail.data.answer;

        this.ruleForm.sort = detail.data.sort;
        this.ruleForm.valid_date_type = detail.data.valid_date_type;
        if (this.ruleForm.valid_date_type === 2) {
          this.ruleForm.valid_date_start = detail.data.valid_date_start;
          this.ruleForm.valid_date_end = detail.data.valid_date_end;
          this.date_value = [
            this.ruleForm.valid_date_start,
            this.ruleForm.valid_date_end
          ];
        }
        this.ruleForm.status = detail.data.status;
        this.ruleForm.remark = detail.data.remark;

        // this.wangEdit.txt.html(this.ruleForm.question_answer);
        this.$refs["wang_editor"].innerHTML = this.ruleForm.question_answer;
      }
    }
  }
};
</script>
<style lang="scss" scoped></style>
